<template>
  <div class="todo-app">
    <!-- 顶部应用栏 -->
    <TopAppBar />
    
    <!-- 主工作区 -->
    <div class="main-workspace">
      <!-- 左侧导航菜单 -->
      <NavigationMenu />
      
      <!-- 中间内容区域 -->
      <div class="content-area">
        <!-- 统计信息面板 -->
        <StatisticsPanel  v-if="state.displayMode !== 'calendar'" />
        
        <!-- 任务列表区或日历视图 -->
        <TaskListPanel v-if="state.displayMode !== 'calendar'" />
        <CalendarView v-if="state.displayMode === 'calendar'" />
      </div>
    </div>
    

  </div>
</template>

<script setup>
import { computed } from 'vue'
import TopAppBar from '@/components/TodoList/TopAppBar.vue'
import NavigationMenu from '@/components/TodoList/NavigationMenu.vue'
import StatisticsPanel from '@/components/TodoList/StatisticsPanel.vue'
import TaskListPanel from '@/components/TodoList/TaskListPanel.vue'
import CalendarView from '@/components/TodoList/CalendarView.vue'
import { useTodoStore } from '@/stores/todoStore'

const { state } = useTodoStore()

// 不再需要currentView计算属性，直接使用state.displayMode
</script>

<style lang="less" scoped>
.todo-app {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
}

.main-workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
</style>